<template>
	<view>
		<scroll-view id="scrollview" scroll-y :scroll-top="scrollTop" :scroll-with-animation="true" :style="{height:style.contentH+'px'}">
			<!-- 聊天列表 -->
			<block v-for="(item,index) in list" :key="index">
				<user-chat-list class="user-chat-item" :item="item" :index="index"></user-chat-list>
			</block>
			<!-- <view style="height:40rpx;"></view> -->
		</scroll-view> 
		
		
		<!-- 聊天输入框 -->
		<user-chat-bottom  @submit='submit'></user-chat-bottom>
	</view>
</template>

<script>
	import userChatBottom from '../../components/user-chat/user-chat-bottom.vue'
	import time from '../../common/time.js'
	import userChatList from '../../components/user-chat/user-chat-list.vue'
	export default { 
		components:{
			userChatBottom,
			userChatList  
		},
		data() {
			return {
				scrollTop:0,
				style:{
					contentH:0,
					itemH : 0
				},
				list :[]
			}
		},
		methods: {
			submit(text){
				if(text.length<=0){return;}
				let now = new Date().getTime()
				let obj = {
					isme:true,
					userpic:"../../static/demo/userpic/2.jpg",
					type:"text",
					data:text,
					time:now,
					gstime:time.gettime.getChatTime(now,this.list[this.list.length-1].time)
				}
				this.list.push(obj)
				this.pageToBottom() 
			},
			// 初始化参数
			initdata(){
				try {
				    const res = uni.getSystemInfoSync();
					this.style.contentH = res.windowHeight - uni.upx2px(120) 
				} catch (e) {
				    // error
				}
			},
			pageToBottom(){
				let q = uni.createSelectorQuery();
				q.select('#scrollview').boundingClientRect();
				q.selectAll('.user-chat-item').boundingClientRect();
				
				q.exec(res=>{
					res[1].forEach((ret)=>{
						this.style.itemH += ret.height
					})
					if(this.style.itemH > this.style.contentH){
						this.scrollTop = this.style.itemH;
					}
				})
				
			},
			// 获取数据
			getdata(){
				let arr = [
					
						{	
							isme:false,
							userpic:"../../static/demo/userpic/2.jpg",
							type:"text",
							data:"聊天内容",
							time:"1554970014",
							gstime:'12:00' 
						},
						{
							isme:true,
							userpic:"../../static/demo/userpic/2.jpg",
							type:"img",
							data:"../../static/demo/userpic/2.jpg",
							time:"1554970814",
							gstime:'12:00'
						},
						{
							isme:false,
							userpic:"../../static/demo/userpic/2.jpg",
							type:"text",
							data:"聊天内容",
							time:"1554970014",
							gstime:'12:00' 
						},
						{
							isme:true,
							userpic:"../../static/demo/userpic/2.jpg",
							type:"img",
							data:"../../static/demo/userpic/2.jpg",
							time:"1554970814",
							gstime:'12:00'
						},
						{
							isme:false,
							userpic:"../../static/demo/userpic/2.jpg",
							type:"text",
							data:"聊天内容",
							time:"1554970014",
							gstime:'12:00' 
						},
						{
							isme:true,
							userpic:"../../static/demo/userpic/2.jpg",
							type:"img",
							data:"../../static/demo/userpic/2.jpg",
							time:"1554970814",
							gstime:'12:00'
						},
						{
							isme:false,
							userpic:"../../static/demo/userpic/5.jpg",
							type:"text",
							data:"聊天内容",
							time:"1554970014",
							gstime:'12:00' 
						},
						{
							isme:true,
							userpic:"../../static/demo/userpic/4.jpg",
							type:"img",
							data:"../../static/demo/userpic/2.jpg",
							time:"1554970814",
							gstime:'12:00'
						},
						{
							isme:false,
							userpic:"../../static/demo/userpic/3.jpg",
							type:"text",
							data:"聊天内容",
							time:"1554970014",
							gstime:'12:00' 
						},
						{
							isme:true,
							userpic:"../../static/demo/userpic/1.jpg",
							type:"img",
							data:"../../static/demo/userpic/2.jpg",
							time:"1554970814",
							gstime:'12:00'
						},
					
				];
				for(let i = 0; i < arr.length; i++){
					arr[i].gstime = time.gettime.getChatTime(arr[i].time, i>0?arr[i-1].time:0)
				}
				this.list = arr
			},
			
			
		},
		onReady(){
			this.pageToBottom()
		},
		onLoad(){
			this.getdata()
			this.initdata()
		}
	}
</script>

<style>
	
</style>
